<template>
  <div class="maintenance">
    <Loading :isLoading = "isLoading" />
    <div class="include">
      <h3>What's included with Maintenance?</h3>
      <div v-html="maintData.warranty"></div>
    </div>
    <div class="license">
      <h3>Maintenance is Included with Licenses</h3>
      <div v-html="maintData.service"></div>
    </div>
    <div class="policy">
      <div v-html="maintData.policy"></div>
    </div>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue'
import {getMaintenanceInfo} from "../../api/support";
import Loading from '../Loading.vue'
export default {
  name: "Maintenance",
  components:{Loading},
  setup(){
    const maintData = ref({})
    let isLoading = ref(true)
    onMounted(()=>{
      getMaintenanceInfo().then((res)=>{
        if(res && res.code === 200){
          maintData.value=res.data
          isLoading.value = false
        }
      })
    })
    return{
      maintData,
      isLoading
    }
  }
}
</script>

<style scoped lang="scss">
  .maintenance{
    .include{
      h3{
        font-size:30px;
        color:#333;
        text-align: center;
        line-height: 100px;
      }
      .include-content{
        .item{
          display:flex;
          justify-content:flex-start;
          margin-bottom:20px;
          img{
            width:100px;
            height:auto;
            margin-right: 10px;
          }
          .content{
            h4{
              font-size:26px;
              line-height: 40px;
              color:#333;
              margin-bottom: 0px;
            }
            p{
              font-size:20px;
              color:#666;
            }
          }
        }
      }
    }
    .license{
      background:white;
      padding: 35px 20px 30px 20px;
      margin-bottom:20px;
      box-shadow: 0px 12px 37px -6px rgb(0 0 0 / 30%);
      h3{
        text-align: center;
        color: #333;
        padding-bottom: 10px;
        line-height: 1em;
        font-weight: 500;
        font-size:26px;
      }
      p{
        font-size:20px;
        color:#666;
      }
    }
    .policy{
      display:grid;
      grid-template-columns: repeat(1, 1fr);
      .item{
        background:white;
        padding: 35px 20px 30px 20px;
        text-align: center;
        box-shadow: 0px 12px 37px -6px rgb(0 0 0 / 30%);
        h4{
          font-size:30px;
          color:#333;
          text-align: center;
          line-height: 50px;
          margin-bottom: 0px;
        }
        img{
          width:100px;
          height:auto;
          margin-right: 10px;
        }
        p{
          font-size:20px;
          color:#666;
        }
      }
    }
  }
</style>
